<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础版</title>
		<script type="text/javascript" src="/homework/web/base/js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			var id=1;
			function testAdd(){
				var name=$("#name").val();
				var age=$("#age").val();
				//字符串拼接
				var html=""
				+"<tr id='tr"+id+"'>"
				+"<td id='tda"+id+"'>"+id+"</td>"
				+"<td id='tdb"+id+"'>"+name+"</td>"
				+"<td id='tdc"+id+"'>"+age+"</td>"
				+"<td id='tdd"+id+"'><a href='javascript:testDel("+id+");'>删除</a><a href='javascript:testUpd("+id+");'>修改</a></td>"
				+"</tr>"
				//$("#tbody").html($("#tbody").html()+html);
				$("#tbody").append(html);
				id++;
			}
			
			function testDel(vid){
				if(confirm("是否删除该纪录？")){
					$("#tr"+vid).remove();	//删除该行		
					//remove()--自身及后代都会删除
					//empty仅删除后代，自身会保留
			    }
			}
			//修改 1
			function testUpd(vid){
				$("#tdb"+vid).html("<input type='text' id='tName"+vid+"' value='"+$("#tdb"+vid).html()+"'/>")
				$("#tdc"+vid).html("<input type='text' id='tage"+vid+"'  value='"+$("#tdc"+vid).html()+"'/>")
				$("#tdd"+vid).html("<a href='javascript:testSave("+vid+");'>保存</a>")
			}
			//修改 2-保存
			function testSave(vid){
				$("#tdb"+vid).html($("#tName"+vid).val())
				$("#tdc"+vid).html($("#tage"+vid).val())
				$("#tdd"+vid).html("<a href='javascript:testDel("+vid+");'>删除</a><a href='javascript:testUpd("+vid+");'>修改</a>")
			}
			function testSelect(){
				$("tr").css("background-color","");
				//获取搜索框中的值
				var val=$("#name2").val();
				if(val=='')
				return;
				$("tr").each(function(){
					if($(this).find("td[id^='tdb']").text().indexOf(val)>-1){
						$(this).css("background-color","green");
					}
				})
			}
		
		</script>
	</head>
	<body>
		<div>
			记录列表<br><br>
			姓名：<input type="text" id='name' placeholder="姓名" />
			年龄：<input type="text" id='age' placeholder="年龄" />
			<button onclick="testAdd()">添加</button><br><br>
			姓名：<input type="text" id='name2' placeholder="姓名" />
			<button onclick="testSelect()">搜索</button><br><br>
			<table style="border: 1px solid black;width: 600px;">
				<thead>
					<tr>
						<td style="width: 15%">ID</td>
						<td style="width: 30%">姓名</td>
						<td style="width: 30%">年龄</td>
						<td style="width: 25%">操作</td>
					</tr>
				</thead>
				<tbody id="tbody"></tbody>
			</table>
			
			
		</div>
	</body>
</html>
